<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      *{
         margin:0;
         padding:0;
      }
      div{
         width:100px;
         height:100px;
         background:pink;
         
         position:absolute;
         left:0;
         top:0;
      }
   </style>
</head>
<body>
   <div></div>
   <script>
      // 实现鼠标点击，方块移动到指定地点的目标
      // 封装运动函数
      function move(ele,type,target){
         // 定义一个初始变量
         let stance = 0;
         // 1、加定时器
         let timer = setInterval( () => {
            stance +=7;
            ele.style[type] = stance + 'px';
            // console.log(stance);       
               // 达到预定位置后停止定时器
            if(stance>=target){
               stance = target;
               // console.log(stance);
               clearInterval(timer);
            }
         },50)
      }
      // // 获取div元素节点
      var div = document.querySelector('div');
      // 移入鼠标，触发运动函数
      div.addEventListener('click',function(){
         move(this,'left',200);
         console.log(1);
         
      })
      // div.onmouseover = function(){
      //    var left = 0;
      //    move(div,'left',200);
      //    // console.log(1);
      // }
   </script>
</body>
</html>